<template>
  <div id="__nuxt">
    <!---->
    <div id="__layout">
      <div>
        <div id="addressNew" class="addressNew">
          <div class="prompt"></div>
          <Hed></Hed>
          <div class="addressNewHeader">
            <div class="addressNewHeaderT">新增收货地址</div>
          </div>
          <div id="addressN" class="floatLeft">
            <p
              class="autoGetAddress"
              style="padding: 0 0.2rem; margin-top: 0.5rem"
            >
              自动添加地址
            </p>
            <div class="addressName floatLeft">
              <label for="name" class="addressNameLabel">收件人</label>
              <input
                v-model="adrs.username"
                id="receiver"
                placeholder="请输入收货人姓名"
                class="receiver font26 floatLeft"
                type="text"
              />
              <div id="clearC" class="addressNameT"></div>
            </div>
            <div class="addressName floatLeft">
              <label for="name" class="addressNameLabel">手机号</label>
              <input
                v-model="adrs.phone"
                id="telphone"
                maxlength="11"
                type="tel"
                placeholder="请输入收货人手机号"
                class="receiver font26 floatLeft"
              />
              <div id="clearO" class="addressNameT"></div>
            </div>
            <div class="addressName floatLeft">
              <label for="name" class="addressNameLabel">省份/直辖市</label>
              <select
                id="province"
                class="province font26 floatLeft"
                @change="citychange(0, $event)"
                v-model="currentProvince"
              >
                <option
                  v-for="(item, index) in province.provinceArr"
                  :key="index"
                  :value="province.provinceArr[index].ProID"
                >
                  {{ item.name }}
                </option>
              </select>
              <div class="addressI"></div>
            </div>
            <div class="addressName floatLeft">
              <label for="name" class="addressNameLabel">城市</label>
              <select
                id="city"
                class="province font26 floatLeft"
                @change="citychange(1, $event)"
                v-model="currentCity"
              >
                <option
                  v-for="(item, index) in cityArr"
                  :key="index"
                  :value="cityArr[index].CityID"
                  >{{ item.name }}</option
                >
              </select>
              <div class="addressI"></div>
            </div>
            <div class="addressName floatLeft">
              <div class="none">
                <input
                  id="areaN"
                  placeholder="请填写地区"
                  class="receiver font26 floatLeft"
                  type="text"
                />
                <div id="clearN" class="addressNameT"></div>
              </div>
              <label for="name" class="addressNameLabel">区/县</label>
              <select
                id="area"
                class="province font26 floatLeft"
                v-model="currentArea"
              >
                <option
                  v-for="(item, index) in areaArr"
                  :key="index"
                  :value="areaArr[index].Id"
                  >{{ item.DisName }}</option
                >
              </select>
              <div class="addressI"></div>
            </div>
            <div class="addressName floatLeft">
              <label for="name" class="addressNameLabel">详细地址</label>
              <input
                v-model="dizhi"
                id="address"
                maxlength="100"
                placeholder="请输入详细地址"
                class="receiver font26 floatLeft"
              />
            </div>

            <div class="defaultAddressSet">
              <div>设置默认地址</div>
              <label class="mint-switch"
                ><input type="checkbox" class="mint-switch-input" />
                <span class="mint-switch-core"></span>
                <div class="mint-switch-label"></div>
              </label>
            </div>
          </div>
          <div class="bottomNew">
            <div class="addressConfirm" @click="fnToAddress()">保存</div>
          </div>
          <!---->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

// 在computed使用状态机中的数据

import Hed from "../../components/Hed";
import axios from "axios";
export default {
  components: {
    Hed,
  },
  computed: {
    ...mapState({
      goodsList: (state) => state.cart.goodsList,
    }),
  },
  data() {
    return {
      province: [],
      cityArr: [],
      areaArr: [],
      currentProvince: "0",
      currentCity: "0",
      currentArea: "0",
      ab: "",
      adrs: {
        username: "",
        phone: "",
        address: "",
        isDefault: true,
      },
      sheng:null,
      shi:null,
      qu:null,
      dizhi:null,

      addressStore:null,
    };
  },

  methods: {
    citychange(type = 0) {
      let _this = this;
      if (type === 0) {
        this.cityArr = this.province.cityArr.filter((item) => {
          return item.ProID == _this.currentProvince;
        });
        if (this.cityArr.length > 0) {
          this.currentCity = this.cityArr[0].CityID;
          this.citychange(1);
        }
      } else if (type === 1) {
        this.areaArr = this.province.areaArr.filter((item) => {
          return item.CityID == _this.currentCity;
        });
        if (this.areaArr.length > 0) {
          this.currentArea = this.areaArr[0].Id;
        }
      }
    },
    getSelectedText(ele) {
      let text = "";
      ele.options.forEach((item) => {
        if (item.selected) {
          text = item.innerHTML.toString().trim();
          return false;
        }
      });
      return text;
    },

    // **************************************
    handleSave() {},
    fnToAddress() {
      this.$store.commit("address/setAddress", {
        // provinceCode: this.currentProvince,
        // provinceName: this.getSelectedText(province),
        // cityCode: this.currentCity,
        // cityName: this.getSelectedText(city),
        // areaCode: this.currentArea,
        // areaName: this.getSelectedText(area),
        // adrs: this.adrs,

        id: this.currentProvince,
        name: this.adrs.username,
        tel: this.adrs.phone,
        address: this.addressStore,
        isDefault: false,
      });
      this.$router.push({
        path: "/home/AddressManage",
      });
    },
  },
  created() {
    // console.log(this.currentProvince);
    // console.log(this.currentCity);
    // console.log(this.currentArea);
    window.app = this;
    axios
      .get(
        "https://cdn.bestseller.com.cn/assets/h5/json/tsconfig.json?V=1604321268625"
      )
      .then((res) => {
        this.province = res.data;
        // console.log(res.data);
      });
  },
  updated(){
    // console.log(this.currentProvince);
    // console.log(this.province);
    this.province.provinceArr.forEach((v,i)=>{
      if(v.ProID==this.currentProvince){
        this.sheng = v.name
        console.log(this.sheng);
      }
    })
    // console.log(this.currentCity);
    this.province.cityArr.forEach((v,i)=>{
      if(v.CityID==this.currentCity){
        this.shi = v.name
        console.log(this.shi);
      }
    })
    // console.log(this.areaArr);
    // console.log(this.currentArea);
    this.areaArr.forEach((v,i)=>{
      if(v.Id==this.currentArea){
        this.qu = v.DisName
        console.log(this.qu);
      }
    })
    this.adrs.address = this.sheng+this.shi+this.qu
    console.log(this.adrs.address);
    console.log(this.dizhi);
    this.addressStore =this.adrs.address + this.dizhi
  },
};
</script>

<style lang="scss" scoped>
@import url(../../assets/css/default.css);
// @import url(../../assets/css/address.css);

#__nuxt {
  font-size: 12px;
}

.mint-switch-core {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 30px;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  box-sizing: border-box;
  background: #d9d9d9;
}

.mint-switch-core:before {
  width: 50px;
  height: 30px;
  background-color: #fdfdfd;
}

.mint-switch-core:after {
  width: 30px;
  height: 30px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mint-switch-input:checked + .mint-switch-core {
  border-color: #26a2ff;
  background-color: #26a2ff;
}
</style>
